<template>
	<view class="container">
		<custom-header :isHomepage="false"></custom-header>



		<text class="page-title">纪念馆升级</text>

		<view class="main-content">

			<view class="memorial-upgrade-info">
				<view class="info-line">
					<text class="info-label">纪念馆:</text>
					<text class="info-value">{{ currentMemorial?.name || '王久荣' }}</text>
				</view>
				<view class="info-line">
					<text class="info-label">纪念馆ID:</text>
					<text class="info-value">{{ currentMemorial?.id || '102552062' }}</text>
				</view>
				<view class="info-line">
					<text class="info-label">类型:</text>
					<text class="info-value">{{ currentMemorial?.type || '普通馆' }}</text>
				</view>
			</view>

			<view class="upgrade-type-section">
				<text class="section-label">选择升级类型:</text>
				<view class="upgrade-picker-wrapper">
					<picker mode="selector" :range="upgradeOptions" :value="selectedUpgradeIndex" style="width: 100%;"
						@change="bindUpgradeChange">
						<view class="picker-text">
							{{selectedUpgradeIndex > -1 ? upgradeOptions[selectedUpgradeIndex] : '---选择升级类型及年限---'}}
						</view>
					</picker>
					<text class="picker-arrow-icon">▼</text>
				</view>
			</view>

			<view class="payment-method-section">
				<text class="section-label">选择支付方式:</text>
				<view class="payment-methods">
					<view class="payment-method-item" :class="{ selected: selectedPaymentMethod === 'wechat' }"
						@click="selectPaymentMethod('wechat')">
						<image class="payment-icon" src="/static/wechatpay-icon.png" mode="aspectFit"></image>
						<text class="payment-text">微信支付</text>
					</view>
					<button class="balance-pay-button" :class="{ selected: selectedPaymentMethod === 'balance' }"
						@click="selectPaymentMethod('balance')">
						余额支付
					</button>
				</view>
			</view>
			<button class="confirm-upgrade-button" @click="handleConfirmUpgrade">确认升级并支付</button>

			<text class="cancel-link" @click="handleCancel">暂不升级(返回)</text>

		</view>
		<!-- End Main Content Area -->

		<!-- Explanation Section -->
		<view class="explanation-section">
			<text class="explanation-title">说明:</text>
			<text class="explanation-text">1、确认升级后无法撤销，支付成功会自动升级。</text>
			<text class="explanation-text">2、纪念馆等级及功能权限介绍请从以下链接进入查看:</text>
			<button class="permission-explain-button" @click="handlePermissionExplain">纪念馆权限说明</button>
		</view>


		<Footer></Footer>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import CustomHeader from '@/components/header/index.vue'; // Adjust path as needed
	import Footer from '@/components/footer/index.vue'; // Adjust path as needed

	import { onLoad } from '@dcloudio/uni-app'; 

	const currentMemorial = ref({
		id: '102552062',
		name: '王久荣',
		type: '普通馆',
	});


	const upgradeOptions = ref([
		'---选择升级类型及年限---',
		'豪华馆 - 1年',
		'豪华馆 - 永久',
		'尊贵馆 - 1年',
		'尊贵馆 - 永久',
	]);
	const selectedUpgradeIndex = ref(0); 

	const selectedPaymentMethod = ref('wechat'); 

	onMounted(() => {
		
	});



	const bindUpgradeChange = (e) => {
		selectedUpgradeIndex.value = e.detail.value;
		console.log('Selected upgrade option:', upgradeOptions.value[selectedUpgradeIndex.value]);
	};

	const selectPaymentMethod = (method) => {
		selectedPaymentMethod.value = method;
		console.log('Selected payment method:', method);
	};

	const handleConfirmUpgrade = () => {
		console.log('Confirm Upgrade Button clicked');
		if (selectedUpgradeIndex.value === 0) {
			uni.showToast({
				title: '请选择升级类型',
				icon: 'none'
			});
			return;
		}
		if (!selectedPaymentMethod.value) {
			uni.showToast({
				title: '请选择支付方式',
				icon: 'none'
			});
			return;
		}

		const selectedOption = upgradeOptions.value[selectedUpgradeIndex.value];
		console.log('Initiating upgrade for Memorial ID:', currentMemorial.value.id);
		console.log('Selected Option:', selectedOption);
		console.log('Selected Payment Method:', selectedPaymentMethod.value);

	};

	const handleCancel = () => {
		console.log('Cancel Upgrade clicked');
		uni.navigateBack({
			delta: 1
		}); 
	};

	const handlePermissionExplain = () => {
		console.log('Memorial Permission Explanation button clicked');
	};
</script>

<style scoped>
	/* Scoped styles for this page */
	/* Reusing common styles from previous pages */
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f5f5f5;
		/* Match background color */
		padding-bottom: 40rpx;
		/* Add some padding at the bottom */
		box-sizing: border-box;
		/* Include padding in height calculation */
	}

	/* Custom Header - Styles are in CustomHeader.vue */
	/* Need padding on main content to clear fixed header */

	/* Banner Styles - Copied from previous pages */
	.banner {
		width: 100%;
		height: 300rpx;
		/* Adjust height as needed */
		position: relative;
		overflow: hidden;
	}

	.banner-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.banner-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 30rpx 40rpx;
		/* Adjust padding */
		color: #fff;
		/* Text color on banner */
		text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.5);
	}

	.banner-title-area {
		display: flex;
		align-items: flex-end;
	}

	.banner-main-title {
		font-size: 50rpx;
		/* Adjust font size */
		font-weight: bold;
		margin-right: 20rpx;
	}

	.banner-sub-area {
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		/* Adjust font size */
	}

	.banner-url {
		font-size: 20rpx;
		/* Adjust font size */
	}

	.banner-slogan-area {
		display: flex;
		justify-content: flex-end;
		/* Align to the right */
		font-size: 36rpx;
		/* Adjust font size */
	}

	.banner-slogan {
		margin-left: 30rpx;
		/* Spacing between slogans */
		font-weight: bold;
	}

	/* Page Title */
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-top: 40rpx;
		/* Space below banner */
		margin-bottom: 30rpx;
		/* Space above main content card */
		color: #333;
	}

	/* Main Content Area (White Card) */
	.main-content {
		background-color: #fff;
		/* White background */
		margin: 0 20rpx;
		/* Side margins */
		padding: 30rpx;
		/* Inner padding */
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		/* Subtle shadow */
		display: flex;
		flex-direction: column;
		/* No align-items: center here, content is left-aligned within card */
	}

	/* Memorial Info Styles - Reusing info line styles */
	.memorial-upgrade-info {
		margin-bottom: 30rpx;
		/* Space below info block */
		font-size: 28rpx;
		/* Base font size for info lines */
		padding-bottom: 20rpx;
		/* Space above dashed line */
		border-bottom: 1rpx dashed #eee;
		/* Dashed separator */
	}

	.info-line {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
		/* Space between info lines */
		word-break: break-word;
		/* Allow text to wrap */
	}

	.info-line:last-child {
		margin-bottom: 0;
	}

	.info-label {
		color: #333;
		margin-right: 10rpx;
		min-width: 160rpx;
		/* Give labels a minimum width for alignment */
		flex-shrink: 0;
		/* Prevent label from shrinking */
	}

	.info-value {
		color: #555;
		flex-grow: 1;
		/* Allow value to take space */
	}


	/* Upgrade Type Selection Styles */
	.upgrade-type-section {
		margin-bottom: 30rpx;
		/* Space below section */
	}

	.section-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
		/* Space below label */
		display: block;
		/* Make label a block */
	}

	/* Upgrade Picker Styled as a Button/Input */
	.upgrade-picker-wrapper {
		position: relative;
		height: 80rpx;
		/* Match input height */
		line-height: 80rpx;
		font-size: 28rpx;
		color: #333;
		background-color: #fff;
		/* White background */
		border: 1rpx solid #ddd;
		/* Border */
		border-radius: 5rpx;
		/* Match input border radius */
		padding: 0 30rpx 0 20rpx;
		/* Padding for text and arrow */
		display: flex;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
	}

	.picker-text {
		flex: 1;
		/* Allow text to grow */
		text-align: left;
		/* Align text left */
		/* If showing placeholder when nothing selected: */
		/* color: #ccc; */
	}

	.picker-text:empty::before {
		content: '---选择升级类型及年限---';
		/* Placeholder content */
		color: #ccc;
		/* Placeholder color */
	}


	.picker-arrow-icon {
		/* Use actual arrow icon or font icon */
		font-size: 24rpx;
		/* Adjust size */
		color: #666;
		/* Color */
		margin-left: 10rpx;
		/* Space from text */
		flex-shrink: 0;
		/* Prevent shrinking */
	}


	/* Payment Method Styles */
	.payment-method-section {
		margin-bottom: 40rpx;
		/* Space below section */
	}

	.payment-methods {
		display: flex;
		/* justify-content: space-around;*/
		/* Or space-between */
		margin-bottom: 20rpx;
		/* Space below WeChat/Alipay and above Balance Pay */
	}

	.payment-method-item {
		flex: 1;
		/* Allow items to take space */
		display: flex;
		align-items: center;
		justify-content: center;
		/* Center content horizontally */
		height: 80rpx;
		/* Fixed height */
		border: 1rpx solid #ddd;
		/* Default border */
		border-radius: 8rpx;
		margin-right: 20rpx;
		/* Space between items */
		position: relative;
		/* Needed for selection tick */
		background-color: #fff;
		/* Explicit white background */
	}

	.payment-methods .payment-method-item:last-child {
		margin-right: 0;
		/* No margin for the last item */
	}

	.payment-method-item.selected {
		border-color: #ff9800;
		/* Orange border for selected */
		background-color: #fff7e6;
		/* Light orange background for selected */
	}

	.payment-icon {
		width: 50rpx;
		/* Icon size */
		height: 50rpx;
		margin-right: 10rpx;
	}

	.payment-text {
		font-size: 28rpx;
		color: #333;
	}

	.selection-tick {
		position: absolute;
		bottom: 0;
		right: 0;
		font-size: 30rpx;
		/* Adjust tick size */
		color: #ff9800;
		/* Orange tick color */
		/* Using text emoji ✅ as placeholder, replace with image or icon */
		/* If using an image, position it using width/height and background-image */
		transform: rotate(0deg);
		/* Adjust rotation if needed */
	}

	/* Balance Pay Button Style (Separate layout) */
	.balance-pay-button {
		/* Similar style to other payment methods, but different size/padding */
		width: 120rpx;
		/* Fixed width */
		height: 80rpx;
		/* Fixed height */
		border: 1rpx solid #ddd;
		/* Default border */
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		/* Text is stacked */
		align-items: center;
		/* Center text horizontally */
		justify-content: center;
		/* Center text vertically */
		font-size: 24rpx;
		/* Smaller font */
		color: #333;
		background-color: #fff;
		margin: 0;
		/* Remove default button margin */
		padding: 0;
		/* Remove default button padding */
		position: relative;
		/* Needed for selection tick */
		line-height: 1.2;
		/* Adjust line height */
	}

	.balance-pay-button.selected {
		border-color: #ff9800;
		/* Orange border when selected */
		background-color: #fff7e6;
		/* Light orange background */
	}

	/* Tick position for balance button */
	.balance-pay-button .selection-tick {
		bottom: 0;
		right: 0;
	}


	/* Confirm Button Styles - Orange button */
	.confirm-upgrade-button {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		color: #fff;
		background-color: #ff9800;
		/* Orange color */
		border: none;
		border-radius: 8rpx;
		text-align: center;
		margin-top: 20rpx;
		/* Space above button */
		margin-bottom: 30rpx;
		/* Space below button */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Cancel Link Styles */
	.cancel-link {
		display: block;
		/* Make it a block element for margin */
		text-align: center;
		font-size: 28rpx;
		color: #999;
		/* Gray color */
		text-decoration: none;
		/* Remove underline if needed */
		margin-top: 10rpx;
		/* Space above link */
	}


	/* Explanation Section */
	.explanation-section {
		margin-top: 30rpx;
		/* Space above this section */
		margin-left: 20rpx;
		/* Side margins to align with card */
		margin-right: 20rpx;
		font-size: 24rpx;
		color: #666;
		/* Gray text color */
		padding: 20rpx;
		/* Add some padding */
		background-color: #fff;
		/* White background */
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.explanation-title {
		font-weight: bold;
		color: #ff9800;
		/* Orange color for title */
		display: block;
		/* Make title a block for margin-bottom */
		margin-bottom: 10rpx;
	}

	.explanation-text {
		display: block;
		/* Each point on a new line */
		margin-bottom: 8rpx;
		/* Space between points */
		line-height: 1.5;
		/* Improve readability */
	}

	.explanation-text:last-of-type {
		margin-bottom: 20rpx;
		/* Add space before the button below it */
	}

	/* Permission Explanation Button Style */
	.permission-explain-button {
		/* Gray/White button style */
		width: calc(100% - 40rpx);
		/* Take full width minus explanation-section padding */
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #333;
		/* Dark gray text */
		background-color: #e0e0e0;
		/* Light gray background */
		border: 1rpx solid #ccc;
		/* Subtle border */
		border-radius: 8rpx;
		text-align: center;
		margin: 0 auto;
		/* Center the button within its container */
		display: flex;
		align-items: center;
		justify-content: center;
	}


	/* QR Codes Section - Copied from previous pages */
	.qr-codes-section {
		display: flex;
		justify-content: space-around;
		padding: 40rpx 0;
		/* Vertical padding */
		margin-top: 30rpx;
		/* Space above section */
		margin-left: 20rpx;
		/* Side margins to align with other sections */
		margin-right: 20rpx;
	}

	.qr-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.qr-image {
		width: 200rpx;
		height: 200rpx;
		/* Need actual images */
		background-color: #eee;
		/* Placeholder background */
	}

	.qr-label {
		font-size: 26rpx;
		color: #555;
		margin-top: 10rpx;
	}

	/* Footer Styles - Copied from previous pages */
	.footer {
		margin-top: 40rpx;
		padding: 40rpx 20rpx;
		background-color: #f0f0f0;
		/* Light gray background */
		text-align: center;
		margin-top: auto;
		/* Push footer to the bottom */
		box-sizing: border-box;
	}

	.footer-links {
		font-size: 26rpx;
		color: #555;
		margin-bottom: 20rpx;
	}

	.footer-links text {
		margin: 0 10rpx;
	}

	.footer-copyright {
		font-size: 22rpx;
		color: #888;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.footer-copyright text {
		margin-bottom: 5rpx;
	}

	/* Padding to clear the fixed header */
	/* This style is crucial for pages using the fixed custom header */
	.page-content-wrapper {
		padding-top: 88rpx;
		/* Height of the fixed header */
		flex: 1;
		/* Allow content to take space */
		display: flex;
		flex-direction: column;
	}
</style>